var pixelMaps = {
	numbers: [
		[
			[0,1,1,0],
			[1,0,0,1],
			[1,0,0,1],
			[1,0,0,1],
			[1,0,0,1],
			[1,0,0,1],
			[0,1,1,0],
		],
		[
			[0,1],
			[1,1],
			[0,1],
			[0,1],
			[0,1],
			[0,1],
			[0,1],
		],
		[
			[0,1,1,0],
			[1,0,0,1],
			[0,0,0,1],
			[0,0,1,0],
			[0,1,0,0],
			[1,0,0,0],
			[1,1,1,1],
		],
		[
			[0,1,1,0],
			[1,0,0,1],
			[0,0,0,1],
			[0,0,1,0],
			[0,0,0,1],
			[1,0,0,1],
			[0,1,1,0],
		],
		[
			[0,0,1,0],
			[0,1,1,0],
			[0,1,1,0],
			[1,0,1,0],
			[1,1,1,1],
			[0,0,1,0],
			[0,0,1,0],
		],
		[
			[1,1,1,1],
			[1,0,0,0],
			[1,1,1,0],
			[1,0,0,1],
			[0,0,0,1],
			[1,0,0,1],
			[0,1,1,0],
		],
		[
			[0,1,1,0],
			[1,0,0,1],
			[1,0,0,0],
			[1,1,1,0],
			[1,0,0,1],
			[1,0,0,1],
			[0,1,1,0],
		],
		[
			[1,1,1,1],
			[0,0,0,1],
			[0,0,1,0],
			[0,0,1,0],
			[0,1,0,0],
			[0,1,0,0],
			[0,1,0,0],
		],
		[
			[0,1,1,0],
			[1,0,0,1],
			[1,0,0,1],
			[0,1,1,0],
			[1,0,0,1],
			[1,0,0,1],
			[0,1,1,0],
		],
		[
			[0,1,1,0],
			[1,0,0,1],
			[1,0,0,1],
			[0,1,1,1],
			[0,0,0,1],
			[1,0,0,1],
			[0,1,1,0],
		],
	],
	numbers5: [
		[
			[.20,1,.20],
			[1,0,1],
			[1,0,1],
			[1,0,1],
			[.25,1,.25]
		],
		[
			[.1,1],
			[1,1],
			[0,1],
			[0,1],
			[0,1]
		],
		[
			[1,1,.2],
			[0,0,1],
			[.2,1,.3],
			[1,0,0],
			[1,1,1]
		],
		[
			[1,1,.3],
			[0,0,1],
			[0,1,.1],
			[0,0,1],
			[1,1,.3]
		],
		[
			[1,0,1],
			[1,0,1],
			[1,1,1],
			[0,0,1],
			[0,0,1]
		],
		[
			[1,1,1],
			[1,0,0],
			[1,1,.3],
			[0,0,1],
			[1,1,.2]
		],
		[
			[.3,1,0],
			[1,0,0],
			[1,1,.3],
			[1,0,1],
			[.3,1,.3]
		],
		[
			[1,1,1],
			[0,0,1],
			[0,1,.1],
			[0,1,0],
			[0,1,0]
		],
		[
			[.25,1,.25],
			[ 1,0, 1],
			[.2,1,.2],
			[ 1,0, 1],
			[.35,1,.35]
		],
		[
			[.3,1,.3],
			[1,0,1],
			[.5,1,1],
			[0,0,1],
			[0,1,.3]
		],
	]
};
function drawUnread(canvas, unread, settings) {
	var ctx = canvas.getContext('2d');
	var count = unread.length;
	if(!settings) settings = {cutoff: 200};
	if(!settings.cutoff) settings.cutoff = 200;
	var numbers = (count > 3 || unread >= settings.cutoff)? pixelMaps.numbers5 : pixelMaps.numbers;
	var bgHeight = numbers[0].length;
	var bgWidth = 0;
	var padding = 1;
	var opadding = 1;
	
	for(var index = 0; index < count; index++) {
		bgWidth += numbers[unread[index]][0].length;
	}
	bgWidth += count - 1; // to account for the padding between characters
	if(bgWidth > canvas.width - 4) {
		opadding = 0;
		if(bgWidth > canvas.width - 2) {
			padding = 0;
			bgWidth -= count - 1;
			if(bgWidth > canvas.width - 2) {
				bgWidth = canvas.width - 2;
			}
		}
	}
	
	var l = settings || {anchor:{v:0,h:2},offset:{x:0,y:0},bgcolor:'fef4ac',olcolor:'dabc5c',fgcolor:'2c3323'};
	base = {
		x: l.offset.x,
		y: l.offset.y
	};
	base.x += l.anchor.h==0? 0 :
				l.anchor.h==1? 8 - (bgWidth>>1)-1-opadding :
				16 - bgWidth - 2 - (opadding<<1);
	base.y += l.anchor.v==0? 0 :
				l.anchor.v==1? 8 - (bgHeight>>1) - 2 :
				16 - bgHeight - 4;
	
	ctx.fillStyle = "#" + l.bgcolor;
	ctx.strokeStyle = "#" + l.olcolor;
	ctx.strokeWidth = 1;

	ctx.fillRect(
		base.x,
		base.y,
		bgWidth+2+2*opadding,
		bgHeight+4);
	
	
	ctx.fillStyle = "#" + l.fgcolor;
	var digit;
	var digitsWidth = 0;
	for(var index = 0; index < count; index++) {
		digit = unread[index];
		if (numbers[digit]) {
			var map = numbers[digit];
			var height = map.length;
			var width = map[0].length;
			for (var y = 0; y < height; y++) {
				for (var x = 0; x < width; x++) {
					if(map[y][x]) {
						ctx.globalAlpha = map[y][x];
						ctx.fillRect(base.x + 1 + opadding + digitsWidth + x, base.y + y + 2, 1, 1);
					}
				}
			}
			
			digitsWidth += width + padding;
		}
	}
	ctx.globalAlpha = 1.0;
	ctx.strokeRect(
		base.x + 0.5,
		base.y + 0.5,
		bgWidth+1 + 2*opadding,
		bgHeight+3);
}